/* 
  目标： 使用Context来跨组价通信，
  需求：让App组件，直接传数据给SonSon组件
*/

import React, { Component } from 'react';
// 1. 创建context，解构出两个组件Provider和Consumer
const { Provider, Consumer } = React.createContext();
export default class App extends React.Component {
  render() {
    return (
      // 2. Provider传数据，通过设置value属性
      // 💥 包住要接收数据的组件
      <Provider value={'hello SonSON'}>
        <div>
          <h1>父组件</h1>
          <Son></Son>
        </div>
      </Provider>
    );
  }
}

class Son extends Component {
  render() {
    return (
      <div>
        <h2> 儿子</h2>
        <SonSon></SonSon>
      </div>
    );
  }
}

class SonSon extends Component {
  render() {
    return (
      // 3. 使用Consumer组件，接收数据
      // 🔔 插槽位置，接收一个函数，函数的形参，就是传来的数据，函数返回jSX
      <Consumer>
        {(num) => (
          <div>
            <h3>传来的数据 {num}</h3>
            <h2> 孙子</h2>
          </div>
        )}
      </Consumer>
    );
  }
}
